<html>
<head>
	<title>Wave Editor</title>
	<script src="utils.js" type="text/javascript"></script>
	<script src="rpc.js" type="text/javascript"></script>
	<script src="common.pbjson.js" type="text/javascript"></script>
	<script src="waveclient-rpc.pbjson.js" type="text/javascript"></script>
	<script src="webclient.pbjson.js" type="text/javascript"></script>
	<script src="jsot.js" type="text/javascript"></script>
	<script src="path.js" type="text/javascript"></script>
	<script src="editor.js" type="text/javascript"></script>
	<script src="domiterator.js" type="text/javascript"></script>
</head>
<body>
	<div id="login">
		<form>
			<p>User JID: <input type="text" id="jid" value="tux" />@wave1.vs.uni-due.de</p>
			<p><input type="button" value="Login" onclick="login()" /></p>
			<p id="logintext"></p>
		</form>
	</div>

  <h1>Path example</h1>
  <input type="submit" value="Test path" onclick="testPath()" />
  <input type="submit" value="Test path 2" onclick="testPath2()" />
  <input type="submit" value="Test path 3" onclick="testPath3()" />
  <input type="submit" value="Print path" onclick="printPath()" />
  <input type="submit" value="Template" onclick="buildTmpl()" />
  <input type="submit" value="Dump" onclick="dump()" />
  
  <h1>Template</h1>
  <div id="tmpl"></div>
  
  <script type="text/javascript">

var root1;
var root2;
var mainDoc;
var axis1;
var axis2;
var templatePath1;
var templatePath2;

/**
 * Called when clicking on login
 */
function login()
{
	document.getElementById('logintext').innerHTML = "Logging in ... please wait";
	// Login at the wave server
	JSOT.Rpc.login( document.getElementById('jid').value + "@wave1.vs.uni-due.de", onLogin );
}

/**
 * Called when the server has logged us in
 */
function onLogin()
{
	document.getElementById('logintext').innerHTML = "Logging successful";
	
	// Initialize the wave
	var wave = JSOT.Wave.getWave( "w+path", "wave1.vs.uni-due.de" );
	var wavelet = wave.getWavelet( "conv+root", "wave1.vs.uni-due.de" );
	// Register event handlers to become notified when something changes
	mainDoc = wavelet.getDoc("conversation");
	mainDoc.has_gui = true;
	
	var path = new JSOT.Path.Axis.Child();
	path.filter = new JSOT.Path.Filter.NodeName( "root" );
	var path2 = new JSOT.Path.Axis.Child();
	path2.filter = new JSOT.Path.Filter.NodeName( "msg" );
	path.nextPath = path2;
	path2.parentPath = path;
	// path.evaluate( mainDoc, true );
	templatePath1 = new JSOT.Path.PathTemplate( path );
	axis1 = path;
	root1 = templatePath1.createInstance( mainDoc );
	
	var tpath = new JSOT.Path.Axis.Child();
	tpath.filter = new JSOT.Path.Filter.NodeName( "root" );
	var path2 = new JSOT.Path.Axis.Child();
	path2.filter = new JSOT.Path.Filter.NodeName( "msg" );
	tpath.nextPath = path2;
	path2.parentPath = tpath;
	var path3 = new JSOT.Path.Axis.Child();
	path3.filter = new JSOT.Path.Filter.NodeName( "comment" );
	path2.nextPath = path3;
	path3.parentPath = path2;
	path3.filter.nextFilter = new JSOT.Path.Filter.HasText();
	// tpath.evaluate( mainDoc, true );
	templatePath2 = new JSOT.Path.PathTemplate( tpath, mainDoc );
	// templatePath2.setMapping( new JSOT.Path.Mapping.Text() );
	axis2 = tpath;
	root2 = templatePath2.createInstance( mainDoc );
	
	// Open the wave
	JSOT.Rpc.openWavelet( "wave://wave1.vs.uni-due.de/w+path/conv+root" );
}

function testPath()
{
  var root = new JSOT.Doc.ElementStart("root", { } );
  var msg1 = new JSOT.Doc.ElementStart("msg", { } );
  root.insertBefore( msg1 );
  var msg2 = new JSOT.Doc.ElementStart("msg", { } );
  root.insertBefore( msg2 );
  var comment = new JSOT.Doc.ElementStart("comment", { } );
  msg2.insertBefore( comment );  
  var t1 = new JSOT.Doc.TextNode("Hallo Welt");
  comment.insertBefore( t1 );
  var msg3 = new JSOT.Doc.ElementStart("msg", { } );
  root.insertBefore( msg3 );  
  mainDoc.insertBefore( root );
}

function testPath2()
{
  var msg2 = new JSOT.Doc.ElementStart("msg", { } );
  var comment = new JSOT.Doc.ElementStart("comment", { } );
  msg2.insertBefore( comment );  
  var t1 = new JSOT.Doc.TextNode("Erster");
  comment.insertBefore( t1 );
  mainDoc.firstChild.insertBefore( msg2, mainDoc.firstChild.firstChild );
}

function testPath3()
{
  var msg = mainDoc.firstChild.lastChild;
  mainDoc.firstChild.removeChild( msg );
}

function printPath()
{
  window.console.log("----------------------");
  var nodes = root1.getNodes();
  window.console.log( "Path: " + nodes.length );
  for( var i = 0; i < nodes.length; ++i )
  {
	window.console.log( nodes[i].type );
  };
  window.console.log("----------------------");
  
  var nodes = root2.getValues();
  window.console.log( "TPath " + nodes.length );
  for( var i = 0; i < nodes.length; ++i )
  {
	window.console.log( nodes[i].getText() );
  };
  window.console.log("----------------------");
}

// var rootInstance;

function buildTmpl()
{
//  if ( rootInstance )
//  {
//	rootInstance.evaluate();
//  }
//  else
//  {

	var editpath = new JSOT.Path.Axis.Self();
	editpath.filter = new JSOT.Path.Filter.LocalAttribute( "edit", "normal" );
	var templatePath3 = new JSOT.Path.PathTemplate( editpath, mainDoc );

	var liveeditpath = new JSOT.Path.Axis.Self();
	liveeditpath.filter = new JSOT.Path.Filter.LocalAttribute( "edit", "live" );
	var templatePath5 = new JSOT.Path.PathTemplate( liveeditpath, mainDoc );	

	var showpath = new JSOT.Path.Axis.Self();
	// showpath.filter = new JSOT.Path.Filter.HasText();
	var templatePath4 = new JSOT.Path.PathTemplate( editpath, mainDoc );
	// templatePath4.setMapping( new JSOT.Path.Mapping.Text() );
	
	var t1 = new JSOT.Template.StaticTemplate( templ1 );
	var t2 = new JSOT.Template.StaticTemplate( templ2 );
	var t3 = new JSOT.Template.StaticTemplate( templ3 );
	var t4 = new JSOT.Template.StaticTemplate( templ4 );
	var s = new JSOT.Template.SwitchTemplate();
	s.addCase( t2, templatePath3 );
	s.addCase( t4, templatePath5 );
	s.addDefaultCase( t3, templatePath4 );
	var foreach = new JSOT.Template.ForeachTemplate( templatePath2, s );
	t1.addTemplate( "for", foreach );
	var editor = new JSOT.Template.EditorTemplate();
	t4.addTemplate( "editor", editor );
	var root = new JSOT.Template.RootTemplate( t1 );
	rootInstance = root.createInstance( mainDoc, document.getElementById("tmpl") );
//  }
/*  window.console.log("FUCK 3");
  var nodes = instance.evaluate();
  window.console.log("Returned node count: " + nodes.length);
  var dom = document.getElementById("tmpl");
  for( var i = 0; i < nodes.length; ++i )
  {
	dom.appendChild( nodes[i] );
  }
*/
}

function templ1(templateInstance)
{
  window.console.log("FUCK 4");
  var h1 = document.createElement("h1")
  h1.appendChild( document.createTextNode("Hallo Static Template") );
  templateInstance.domNodes.push( h1 );
  var d = document.createElement("div");
  templateInstance.domNodes.push( d );
  templateInstance.instantiateTemplate( "for", d, null );
}

function templ2(templateInstance)
{
  window.console.log("FUCK 5");
  var h1 = document.createElement("h3")
  var input = document.createElement("input");
  input.type = "text";
  input.value = templateInstance.context.getText();
  h1.appendChild( input );
  var input2 = document.createElement("input");
  input2.type = "button";
  input2.value = "Submit";
  input2.onclick = function() { templateInstance.context.setLocalAttribute( "edit", false ); templateInstance.context.setText( input.value ); };
  h1.appendChild( input2 );
  templateInstance.domNodes.push( h1 );
}

function templ3(templateInstance)
{
  window.console.log("FUCK 6");
  var h1 = document.createElement("h3")
  h1.appendChild( document.createTextNode("Eine Nachricht: " + templateInstance.context.getText() ) );
  var input = document.createElement("input");
  input.type = "button";
  input.value = "Edit";
  input.onclick = function() { templateInstance.context.setLocalAttribute( "edit", "normal" ); };
  h1.appendChild( input );
  var input = document.createElement("input");
  input.type = "button";
  input.value = "Live Edit";
  input.onclick = function() { templateInstance.context.setLocalAttribute( "edit", "live" ); };
  h1.appendChild( input );
  templateInstance.domNodes.push( h1 );
}

function templ4(templateInstance)
{
  window.console.log("FUCK 7");
  var d = document.createElement("div")
  var h1 = document.createElement("h3")
  h1.appendChild( document.createTextNode("Bisher: " + templateInstance.context.getText() ) );
  d.appendChild( h1 );

  var input2 = document.createElement("input");
  input2.type = "button";
  input2.value = "Done";
  input2.onclick = function() { templateInstance.context.setLocalAttribute( "edit", false ); };
  d.appendChild( input2 );

  templateInstance.instantiateTemplate( "editor", d, input2 );
  
  templateInstance.domNodes.push( d );
}

function dump()
{
  window.console.log(mainDoc.toString() );
}

/*
var doc = new JSOT.Doc();
var root = new JSOT.Doc.ElementStart("root", { }, doc );
doc.firstChild = root;
doc.lastChild = root;
var msg1 = new JSOT.Doc.ElementStart("msg", { }, doc );
msg1.parentNode = root;
root.firstChild = msg1;
var msg2 = new JSOT.Doc.ElementStart("msg", { }, doc );
msg2.parentNode = root;
msg2.previousSibling = msg1;
msg1.nextSibling = msg2;
var comment = new JSOT.Doc.ElementStart("comment", { }, doc );
comment.parentNode = msg2;
msg2.firstChild = comment;
msg2.lastChild = comment;
var msg3 = new JSOT.Doc.ElementStart("msg", { }, doc );
msg3.parentNode = root;
msg3.previousSibling = msg2;
msg2.nextSibling = msg3;
root.lastChild = msg3;

var path = new JSOT.Path.Axis.Child();
path.filter = new JSOT.Path.Filter.NodeName( "root" );
var path2 = new JSOT.Path.Axis.Child();
path2.filter = new JSOT.Path.Filter.NodeName( "msg" );
path.nextPath = path2;
path2.parentPath = path;

path.evaluate(doc);
window.console.log( path.nodes.length );
for( var i = 0; i < path.nodes.length; ++i )
{
  window.console.log( path.nodes[i].type );
};
*/

  </script>
</body>
</html>